<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奖品价格计算器（含套餐和活动）</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        textarea {
            width: 100%;
            height: 150px;
            margin-bottom: 15px;
            padding: 10px;
            box-sizing: border-box;
        }
        button {
            padding: 10px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin-bottom: 20px;
        }
        button:hover {
            background-color: #45a049;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .total-row {
            font-weight: bold;
            background-color: #e6f7ff;
        }
        .package-row {
            font-weight: bold;
            background-color: #fff2cc;
        }
        .event-row {
            font-weight: bold;
            background-color: #ffd6e7;
        }
        .error-row {
            color: red;
        }
        .controls {
            margin: 15px 0;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 10px;
        }
        .control-group {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        input {
            padding: 8px;
        }
        .summary {
            background-color: #f0f8ff;
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .summary h3 {
            margin-top: 0;
        }
    </style>
</head>
<body>
<h1>奖品价格计算器（含套餐和活动）</h1>
<p>请输入奖品文本（每行一个奖品）：</p>
<textarea id="prizeInput" placeholder="🎁[268]🌻愿"梨"想成真·梨子🍐10
🎁[120]🌻苹果🍎-5.5
🎁[50]🌻香蕉🍌"></textarea>

<div class="controls">
    <div class="control-group">
        <label for="packageCount">套餐数量：</label>
        <input type="number" id="packageCount" min="0" value="0">
    </div>
    <div class="control-group">
        <label for="packagePrice">套餐单价：</label>
        <input type="number" id="packagePrice" min="0" value="0" step="0.01">
    </div>
    <div class="control-group">
        <label for="eventAmount">活动金额：</label>
        <input type="number" id="eventAmount" value="0" step="0.01">
    </div>
</div>

<button onclick="processPrizes()">计算总价</button>

<div class="summary" id="totalPrice"></div>
<div id="resultTable"></div>

<script>
    function processPrizes() {
        const inputText = document.getElementById('prizeInput').value;
        const lines = inputText.split('\n');
        const packageCount = parseInt(document.getElementById('packageCount').value) || 0;
        const packagePrice = parseFloat(document.getElementById('packagePrice').value) || 0;
        const eventAmount = parseFloat(document.getElementById('eventAmount').value) || 0;

        let totalPrice = 0;
        let prizeTotal = 0;

        // 创建表格HTML
        let tableHtml = `
                <table>
                    <thead>
                        <tr>
                            <th>奖品名称</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>总价</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

        for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            if (!line) continue; // 跳过空行

            try {
                // 解析数量（[]中的数字）
                const quantityMatch = line.match(/\[(\d+)\]/);
                if (!quantityMatch || !quantityMatch[1]) {
                    throw new Error('未找到有效的数量格式[数字]');
                }
                const quantity = parseInt(quantityMatch[1]);

                // 解析奖品名称（去掉[]和最后的数字部分）
                let prizeName = line.replace(/\[\d+\]/g, '').trim();

                // 解析单价（最后一个数字，可能是负数）
                const priceMatches = line.match(/(-?\d*\.?\d+)\s*$/);
                let price = 0;
                if (priceMatches && priceMatches.length > 0) {
                    price = parseFloat(priceMatches[0]);
                    // 从奖品名称中去掉价格部分
                    prizeName = prizeName.substring(0, prizeName.lastIndexOf(priceMatches[0])).trim();
                }

                // 计算单行总价
                const lineTotal = quantity * price;
                prizeTotal += lineTotal;

                // 添加到表格
                tableHtml += `
                        <tr>
                            <td>${prizeName}</td>
                            <td>${quantity}</td>
                            <td>${price}</td>
                            <td>${lineTotal.toFixed(2)}</td>
                        </tr>
                    `;
            } catch (error) {
                // 解析错误的行
                tableHtml += `
                        <tr class="error-row">
                            <td colspan="4">错误解析: ${line} (${error.message})</td>
                        </tr>
                    `;
            }
        }

        // 计算套餐和活动金额
        const packageTotal = packageCount * packagePrice;
        totalPrice = prizeTotal + packageTotal + eventAmount;

        // 添加套餐和活动行
        tableHtml += `
                        <tr class="package-row">
                            <td colspan="3">套餐 (${packageCount} × ${packagePrice.toFixed(2)})</td>
                            <td>${packageTotal.toFixed(2)}</td>
                        </tr>
                        <tr class="event-row">
                            <td colspan="3">活动金额</td>
                            <td>${eventAmount.toFixed(2)}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="total-row">
                            <td colspan="3">小计</td>
                            <td>${totalPrice.toFixed(2)}</td>
                        </tr>
                    </tfoot>
                </table>
            `;

        // 显示结果
        document.getElementById('resultTable').innerHTML = tableHtml;
        document.getElementById('totalPrice').innerHTML = `
                <h3>奖品总价: ${prizeTotal.toFixed(2)}</h3>
                <h3>套餐总价: ${packageTotal.toFixed(2)}</h3>
                <h3>活动金额: ${eventAmount.toFixed(2)}</h3>
                <h2>最终总价: ${totalPrice.toFixed(2)}</h2>
            `;
    }
</script>
</body>
</html>
